
<template>
  <div>
    <h3 class="title">订单条件</h3>
    <Form :model="orderInfo" :label-width="120">
      <FormItem label="分配方式：">
        <RadioGroup v-model="orderInfo.isDistribution">
          <Radio :label=0>已分配</Radio>
          <Radio :label=1>未分配</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="当前催收人员：" v-if="orderInfo.isDistribution==0">
        <Select multiple style="width:400px;" placeholder="全部" v-model="orderInfo.collectionUserIds">
          <Option  v-for="sysUser in sysUserList" :value=sysUser.id :key="sysUser.id">{{sysUser.userName}}</Option>
        </Select>
      </FormItem>
      <FormItem label="逾期天数：">
        <Select multiple style="width:400px;" placeholder="全部" v-model="orderInfo.daysStr">
          <Option  v-for="day in dayList" :value=day.id :key="day.id">{{day.value}}</Option>
        </Select>
      </FormItem>
      <FormItem label="结清状态：">
        <Select style="width:400px;" placeholder="全部" v-model="orderInfo.status">
          <Option :value=0 >全部</Option>
          <Option :value=1 >已结清</Option>
          <Option :value=2 >未结清</Option>
        </Select>
      </FormItem>

      <FormItem label="待催订单：">
        <Button type="primary" @click="searchCount">检索订单数</Button>

        <Input v-model="orderCount" disabled placeholder="订单数" style="width: 300px;background-color: #e8e8e8;" />
      </FormItem>
    </Form>
    <Form ref="formDynamic" :model="formDynamic" :label-width="120" style="width: 600px">
      <h3 class="title">催收配置</h3>
      <FormItem label="分配方式：">
        <RadioGroup v-model="formDynamic.type">
          <Radio v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</Radio>
        </RadioGroup>
      </FormItem>
      <div v-if="formDynamic.type != 0">
        <FormItem
          v-for="(item, index) in formDynamic.items"
          :key="index"
          :label="index==0?'分配人员：':''"
          :prop="'items.' + index + '.value'">
          <Row>
            <Col span="10">
              <Select clearable  placeholder="请选择催收员" v-model="item.userId">
                <Option v-for="(sysUser,i) in sysUserList" :value=sysUser.id :key="sysUser.id">{{sysUser.userName}}</Option>
              </Select>
            </Col>
            <Col span="6" style="margin-left: 10px">
              单数：<InputNumber type="text" v-model="item.value" :min="0"  placeholder="请输入数量"></InputNumber>
            </Col>
            <Col span="4" v-if="formDynamic.items.length!=1&&formDynamic.items.length!=index+1" style="margin-left: 10px">
              <Button type="primary" @click="handleRemove(index)" icon="md-close">删除</Button>
            </Col>
            <Col span="2" v-if="formDynamic.items.length==index+1" style="margin-left: 10px">
              <Button type="primary" @click="handleAdd" icon="md-add"></Button>
            </Col>
          </Row>
        </FormItem>
      </div>
      <div v-if="formDynamic.type == 2">
        <FormItem label="平均分配订单数：">
          <InputNumber type="text"  :min="0" v-model="formDynamic.equally"  placeholder="请输入数量"></InputNumber>
        </FormItem>
      </div>
      <FormItem>
        <Button type="primary" @click="btn">确定</Button>
        <Button @click="handleReset('formDynamic')" style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        index: 1,
        sysUserList:[],
        type:0,
        dayList:[],
        orderCount:0,
        typeList:[
          {
            id:0,
            name:'平均分配'
          },
          {
            id:1,
            name:'指定人员分配'
          },
        ],
        orderInfo:{
          isDistribution:0
        },
        formDynamic: {
          equally:0,
          type:0,
          items: [
            {
              value: 0,
              userId:null,
            }
          ]
        },
        initFormDynamic: {
          equally:0,
          type:0,
          items: [
            {
              value: 0,
              userId:null,
            }
          ]
        }
      }
    },
    created(){
      this.getsysUserList();
      for(let i=0;i<=30;i++){
        this.dayList.push({
          id:i,
          value:i+"天"
        })
      }
    },
    methods: {
      btn(){
        let data = {

        }
        console.log(this.formDynamic.items)
      },
      handleState(s){
        return s?s:''
      },
      searchCount(){
        let collectionUserIds = this.orderInfo.collectionUserIds;
        let daysStr = this.orderInfo.daysStr;
        let data = {
          isDistribution:this.orderInfo.isDistribution==0?'is':'',
          collectionUserIds:collectionUserIds?collectionUserIds.toString():'',
          daysStr:daysStr?daysStr.toString():'',
          settleStatus:this.handleState(this.orderInfo.settleStatus),
        }
        console.log(data)
        /*this.$post('/collection/count',data)
          .then((res) => {
            if(res.code === 0){
              // console.log( this.channelCodeList,'channel')
              this.count = res.data;
            }else{
              // this.$Message.error(res.msg);
            }
          }, (err) => {
            this.loading = false;
            console.log(err);
          })*/
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      handleReset () {
        this.formDynamic = JSON.parse(JSON.stringify(this.initFormDynamic));
      },
      handleAdd () {
        console.log(this.formDynamic.items)
        if(this.sysUserList.length > this.formDynamic.items.length){
          this.index++;
          this.formDynamic.items.push({
            value: 0,
            userId:null,
          });
        }
      },
      getsysUserList(){
        this.$post('/sysUser/collection/list',{fb1:2})
          .then((res) => {
            if(res.code === 0){
              // console.log( this.channelCodeList,'channel')
              this.sysUserList = res.data;
            }else{
              // this.$Message.error(res.msg);
            }
          }, (err) => {
            this.loading = false;
            console.log(err);
          })
      },
      handleRemove (index) {
        console.log(this.formDynamic.items[index])
        this.formDynamic.items.splice(index,1);
      }
    }
  }
</script>

<style scoped lang="less">
  .title {
    margin-bottom: 15px;
    margin-left: 10px;
    border-left: solid 3px #20a0ff;
    padding-left: 15px;
    font-weight: bolder;
    font-size: 16px;
    color: #000;
  }
  /deep/ .ivu-input{
    background-color: #dcdee2;
  }

</style>
